<template>
  <view>
    <f-navbar title="新增" navbarType="1"> </f-navbar>
    <view class="add-collection">
      <view class="form">
        <u--form labelPosition="left" labelWidth="80"
		:model="form"
		:rules="rules"
		ref="uForm"
		>
          <u-form-item
            required
			prop="emissionUnitId"
            label="排放单位"
            borderBottom
          >
            <LSelect border="none"  v-model="form.emissionUnitId" dataKey="name" dataValue="id" :localdata="user_signAllList" @change="user_signSelect"></LSelect>
          </u-form-item>
        </u--form>
      </view>
      <view v-for="(item, index) of form.oilList" :key="index">
        <view class="title flex-jb">
          <view>信息{{ index + 1 }}</view>
          <view v-if="index" class="delete" @click="delData(index)">删除</view>
        </view>
        <view class="form">
          <u--form
            labelPosition="left"
            labelWidth="80"
          >
            <u-form-item
              required
              label="油品名称"
              prop="item.oilId"
              borderBottom
            >
              <LSelect border="none"  v-model="item.oilId" dataKey="oilName" dataValue="id" :localdata="oilAllList" @change="oilSelect" :isIndex="true"  :indexNum="index"></LSelect>
            </u-form-item>
            <u-form-item required label="种类" prop="item.categoryId" borderBottom>
				<!-- categoryAllList -->
              <LSelect border="none"  v-model="item.categoryId" dataKey="typeName" dataValue="id" :localdata="item.categoryAllList" ></LSelect>
              
            </u-form-item>
            <u-form-item
              label="预估桶数"
              required
              prop="item.barrelsNumber"
              borderBottom
            >
              <u--input
                v-model="item.barrelsNumber"
                border="none"
                placeholder="请输入"
              ></u--input>
            </u-form-item>
            <u-form-item
              label="预估重量（kg）"
              prop="item.weight"
              borderBottom
              labelWidth="120"
            >
              <u--input
                v-model="item.weight"
                border="none"
                placeholder="请输入"
              ></u--input>
            </u-form-item>
          </u--form>
        </view>
      </view>
      <view class="button">
        <view class="button2" @click="addData">添加</view>
        <view class="button1" @click="submit">确认提交</view>
      </view>
    </view>
  </view>
</template>

<script>
import { addLn_receipt_shipment_order,user_sign_allList,user_oil_charge_standard ,category_allList,receiptShipmentRecordsDetails} from "@/api/collection.js";
import LSelect from "@/components/LSelect";
export default {
	components: {
		LSelect
	},
  data() {
    return {
	user_signAllList:[],
	oilAllList:[],
	categoryAllList:[],
	form: {
		serviceType:1,
		oilList: [
			{
			  oilId: null, //油品id
			  categoryId: null, //油脂种类ID
			  barrelsNumber:null,//桶@change数
			  weight:null,//重量
			  categoryAllList:[],
			},
		],
	},
      rules: {
        emissionUnitId: { required: true, message: "请选择排放单位", trigger: ['blur'] },  
      },
    };
  },
  onLoad(option) {
	if(option.id){
		this.getDetails(option.id)
	}
  	
  },
  onShow() {
	this.getsignList()
  },
  methods: {
	// 获取详情
	getDetails(id) {
	  	receiptShipmentRecordsDetails(id).then(res => {
			if(res.data.oilList.length){
				res.data.oilList.forEach((item, index) => {
				  item.categoryAllList = []
				});
			}
			this.form = res.data
			this.form.id = null;
			
			this.getOilList(this.form.emissionUnitId)
			
	  	})
	},
	// 查询所有排放单位列表
	getsignList() {
		user_sign_allList().then((response) => {
		  this.user_signAllList = response.data;
		});
	},
	// 根据选择的排放单位获取油品列表
	user_signSelect(id){        
		console.log(id);
		this.getOilList(id)
	},
	getOilList(id) {
	  user_oil_charge_standard({
		userId:id
	  }).then((response) => {
		this.oilAllList = response.data;
		this.form.oilList.forEach((item,index) => {
			let arr =  {
				index:index,
				id:item.oilId
			}
			this.oilSelect(arr)
		});
	  });
	},
	 // 选择油品，根据油品获取种类
	oilSelect(e){
		console.log('oilSelect',e)
		let index = e.index
		let data = this.oilAllList.find(item => item.id === e.id)
		
		let isTrue = data.categoryList.find(item => item.id == this.form.oilList[index].categoryId)
		if(!isTrue){
		  this.form.oilList[index].categoryId = ''
		}
		this.form.oilList[index].categoryAllList = [...data.categoryList];
		// 此处是更新视图操作
		let newData = this.form.oilList[index]
		this.form.oilList.splice(index,1,newData)
		// category_allList({
		// 	oilId:e.id
		// }).then((response) => {
		// 	// this.categoryAllList = response.data;
		// 	let isTrue = response.data.find(item => item.id == this.form.oilList[index].categoryId)
		// 	if(!isTrue){
		// 	  this.form.oilList[index].categoryId = ''
		// 	}
		// 	this.form.oilList[index].categoryAllList = [...response.data];
		// 	// 此处是更新视图操作
		// 	let newData = this.form.oilList[index]
		// 	this.form.oilList.splice(index,1,newData)
	 //  });
	},
    addData() {
		let arr =   {
            oilId: null, //油品id
            categoryId: null, //油脂种类ID
            barrelsNumber:null,//桶数
            weight:null,//重量
			categoryAllList:[]
          }
      this.form.oilList.push(arr);
    },
    delData(index) {
		this.form.oilList.splice(index, 1);
    },
	submit(){
		this.$refs.uForm.validate().then((res) => {		  
		  for(let i = 0; i < this.form.oilList.length; i++){
		  	const item = this.form.oilList[i]
		  	if(!item.oilId){
		  		uni.$u.toast('请选择油品信息');
		  		return false
		  	}
		  	if(!item.categoryId){
		  		uni.$u.toast('请选择油脂种类');
		  		return false
		  	}
		  	if(!item.barrelsNumber){
		  		uni.$u.toast('请输入桶数');
		  		return false
		  	}
		  }
		  addLn_receipt_shipment_order(this.form).then(res => {
		  	uni.$u.toast('添加成功');
		  	this.goLink('','back')
		  })
		});
		
	}
  },
};
</script>

<style lang="less" scoped>
.add-collection {
  padding: 30rpx 30rpx 0 30rpx;
  .title {
    font-size: 30rpx;
    color: #000;
    margin: 28rpx 0 20rpx 0;
    .delete {
      color: #138e57;
    }
  }
  .form {
    padding: 0 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
  }
  .button {
    margin: 0 40rpx;
    padding: 80rpx 0;
  }
  .button1 {
    color: #ffffff;
    margin-top: 30rpx;
    background: linear-gradient(83deg, #48b453 0%, #2c9f79 100%);
  }
  .button2 {
    color: #138e57;
    border: 2rpx solid #138e57;
  }
  .button1,
  .button2 {
    padding: 24rpx;
    text-align: center;
    border-radius: 200rpx;
    font-size: 32rpx;
  }
}
</style>
